<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>插件实例</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap-progressbar-3.2.0.min.css">
		<link rel="stylesheet" type="text/css" href="css/bootstrap-progressbar-demo.css">
		<script src="js/jquery.min.js"></script>
		<script src="js/minddust.min.js"></script>
		<script src="js/bootstrap-progressbar.js"></script>
	</head>

	<body>
		<div class="progress progress-striped active">
			<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="20"></div>
		</div>
		<div class="progress progress-striped active">
			<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
		</div>
		<div class="progress progress-striped active">
			<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
		</div>
		<div class="progress progress-striped active">
			<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
		</div>
		<div class="progress progress-striped active">
			<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
		</div>
	</body>

</html>
<script type='text/javascript'>
	$(document).ready(function() {
    $('.progress .progress-bar').progressbar();
});
</script>